import React, { Component } from "react";
import PubSub from "pubsub-js";
import axios from "axios";
export default class Search extends Component {
  searchUser = async () => {
    // 获取用户输入内容
    const { ipt } = this;
    // 消息发布
    PubSub.publish("updateState", {
      isFrist: false,
      isLoading: true,
      isError: false,
    });
    // await 使用fetch发送网络请求,
    try {
      const { items } = await (
        await fetch(`http://localhost:3000/search/users?q=${ipt.value}`)
      ).json();

      // 消息发布
      PubSub.publish("updateState", {
        users: items,
        isFrist: false,
        isLoading: false,
      });
    } catch (err) {
      // 消息发布
      PubSub.publish("updateState", { isLoading: false, isError: true });
    }

    //使用fetch发送网络请求
    // fetch(`http://localhost:3000/search/users?q=${ipt.value}`)
    //   .then((res) => {
    //     return res.json();
    //   })
    //   .then((res) => {
    //     console.log(res.items);
    //   })
    //   .catch((err) => {
    //     console.log(err);
    //   });
  };
  render() {
    return (
      <section className="jumbotron">
        <h3 className="jumbotron-heading">Search Github Users</h3>
        <div>
          <input
            ref={(c) => (this.ipt = c)}
            type="text"
            placeholder="enter the name you search"
          />
          &nbsp;<button onClick={this.searchUser}>Search</button>
        </div>
      </section>
    );
  }
}
